<template>
  <div class="navbar">
    <div class="nav-contain">
      <div class="left"><img :src='fanhui' width="100%" class="fanhui"></div>
      <div class="center">{{title}}</div>
      <div class="right"><input class="pre" type="button" value="订阅"></div>
    </div>
  </div>
</template>

<script>
import fanhui from '../../assets/images/fanhui.png'
export default {
  name: 'navbar',
  data () {
    return {
      title: '运动健身',
      fanhui: fanhui
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbar{
  width:100%;
  height:50px;
  position: absolute;
  z-index: 999;
  top:0px;
}
.nav-contain{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.left,.right{
  width: 40px;
  height: 100%;
}
.fanhui{
  width:13.5px;
  height:24px;
  padding-top: 12px;
  padding-left: 12px;
}
.pre{
  width:95%;
  height:100%;
  padding-right: 5%;
  line-height: 50px;
  background-color: inherit;
  color: #40A5A3;
  font-size: 14px;
  border: none;
}
.center{
  width: calc(100% - 80px);
  height: 100%;
  /* background-color: purple; */
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
</style>
